<template>
  <!-- 首页 -->
  <div class="home">
    <div class="now-peoples" ref="nowPeopleRef">
      <span ref="nowContent"
        >欢迎远方的朋友,当前在站人数<span
          style="font-size: 18px; font-weight: 500"
          >:&nbsp;{{ nowPeoples }}</span
        ></span
      >
    </div>
    <!-- 顶部图片 -->
    <div class="banner" id="particles-js">
      <div id="app">
        <vue-particles
          id="tsparticles"
          @particles-loaded="particlesLoaded"
          url="http://foo.bar/particles.json"
        />

        <vue-particles
          id="tsparticles"
          @particles-loaded="particlesLoaded"
          :options="optionsed"
        />
      </div>
      <el-affix>
        <div class="c-nav-bar">
          <el-icon size="large" @click="drawer = true"><Operation /></el-icon>
        </div>
      </el-affix>
    </div>

    <!-- 主体区域 -->
    <div class="main">
      <el-row :gutter="10">
        <el-col :span="6" :xs="24">
          <!-- 左侧区域 -->
          <div class="left">
            <!-- 个人资料卡片 -->
            <div class="myself-info">
              <div class="headerPi">
                <el-avatar
                  :src="myInfo.headerUrl"
                  size="large"
                  shape="square"
                ></el-avatar>
              </div>
              <div class="name" @click="router.push('/introduction')">
                <h3>{{ myInfo.name }}</h3>
              </div>
              <div class="desc">{{ myInfo.desc }}</div>
              <div class="social-contact">
                <ul>
                  <li v-for="item in myInfo.socialList" :key="item.id">
                    <el-tooltip effect="light">
                      <template #content>
                        <h3>
                          {{ item.name }}
                        </h3>
                        <p>{{ item.contactInfo }}</p>
                      </template>
                      <img :src="item.icon" />
                    </el-tooltip>
                  </li>
                </ul>
              </div>
            </div>

            <!-- 导航卡片 -->
            <div class="nav-bar">
              <!-- 导航项 -->
              <div
                class="item"
                v-for="(item, index) in navbar"
                :key="index"
                @click="go(index, item.router)"
                :class="{ active: currentIndex === index }"
              >
                <img :src="item.icon" />
                {{ item.name }}
              </div>
              <!-- 其它 -->
              <div class="anouther">
                <div class="anouther-item">
                  <img
                    src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E6%B2%99%E6%BC%8F%20%282%29.png"
                  />
                  <span
                    >运营时长
                    <span class="run-time">{{ runTimeText }}</span> 天</span
                  >
                </div>
                <div class="anouther-item">
                  <img
                    src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E8%BF%91%E6%9C%9F%E5%B7%B2%E6%8E%A8.png"
                  />
                  <span>最新更新 {{ latestWithTotal.latestCount }} 篇</span>
                </div>
                <div class="anouther-item">
                  <img
                    src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E6%80%BB%E6%95%B0%E6%8D%AE.png"
                  />
                  <span>文章总数 {{ latestWithTotal.articleTotalCount }} </span>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="12" :xs="24">
          <!-- 主体内容区域 -->
          <div class="body">
            <!-- 屋顶 -->
            <div class="roof">
              <Roof />
            </div>
            <router-view></router-view>
          </div>
        </el-col>

        <el-col :span="6" :xs="24">
          <!-- 右侧区域 -->
          <div class="right">
            <!-- 每日一言 -->
            <div class="every-day-word">
              <!-- 头部区域 -->
              <div class="head">
                <img
                  src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/emoji-26.png"
                />
                <!-- 标题 -->
                <div class="title">原来长大并不简单</div>
              </div>

              <!-- 主体区域 -->
              <div class="body">
                <div v-for="item in everyDayWordList" :key="item.id">
                  <span class="word">{{ item.word }}</span>
                  ——
                  <span class="time">{{ item.createTime }}</span>
                </div>
              </div>

              <!-- 底部区域 -->
              <div class="footer"></div>
            </div>

            <!-- 文章分类 -->
            <div class="article-classify">
              <!-- 头部区域 -->
              <div class="ac-head">
                <div class="ac-left">
                  <img
                    src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E6%96%87%E7%AB%A0%E5%88%86%E7%B1%BB.png"
                  />
                  <p>文章分类</p>
                </div>
                <div class="ac-right">
                  共<span class="ac-count">{{ useCategoryList.length }}</span
                  >个分类
                </div>
              </div>

              <!-- 主体部分  -->
              <div class="ac-body">
                <div
                  class="ac-item"
                  v-for="item in useCategoryList"
                  :key="item.id"
                >
                  <div class="ac-left">
                    <img :src="item.icon" />
                    <div class="ac-name">{{ item.categoryName }}</div>
                  </div>
                  <div class="ac-right">{{ item.articleCount }} 篇</div>
                </div>
              </div>
            </div>

            <!-- 标签 -->
            <div class="tags">
              <Tags />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-drawer v-model="drawer" size="100%" direction="ltr">
      <div
        class="drawer-item"
        v-for="item in navbar"
        :key="item.id"
        @click="router.push(item.router)"
      >
        {{ item.name }}
      </div>
    </el-drawer>
    <!-- 页脚 -->
    <div class="footer">
      <Footer />
    </div>
  </div>
</template>
  
<script setup>
import Tags from "./Tags.vue";
import Roof from "./Roof.vue";
import Footer from "./Footer.vue";
import { onMounted, ref, watch } from "vue";
import { Operation } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { getUseListService } from "@/api/Category";
import { useRoute } from "vue-router";
import { getEveryDayWordService, getMyInfoCardService } from "@/api/MyInfo";
import { useWebSocket } from "@vueuse/core";
import { serverStore } from "@/stores/server";
import { ElMessage, ElNotification } from "element-plus";
import { getNowPeopleService } from "@/api/WebSocket";
import gsap from "gsap";
import { getInfoService, getUserIpService } from "@/api/Home";
import { RunTimeCalculator } from "@/utils/RunTimeCalculattor";

const router = useRouter();
const route = useRoute();

/**
 *  WebSocket 连接
 */
const { ws } = serverStore();
const clientId = Math.random().toString(36).substring(2) + "用户端";
const { data, send } = useWebSocket(ws + "/" + clientId, {
  autoReconnect: true,
});

// 监听ws 消息
watch(data, (newData) => {
  if (newData) {
    try {
      const msg = JSON.parse(newData);
      ElNotification({
        title: "大大发新通知啦",
        duration: 0,
        message: msg.message,
        type: "success",
      });
    } catch (err) {
      ElMessage.error("解析 WebSocket 消息失败：", err);
    }
  }
});
// 发送消息
const clientSendServer = async () => {
  await getUserIpService().then(({ data }) => {
    const cityInfo = data.adcode.o;
    const ip = data.ipinfo.text;
    console.log("城市信息:", cityInfo, "ip信息:", ip);
    const message = {
      cityInfo: cityInfo,
      ip: ip,
    };
    send(JSON.stringify(message));
  });
};

// 网站上线时间戳
const WEB_STAMP = new Date("2025-5-4").getTime();
const runTimeText = ref("");
// 创建计算器实例
const runtime = new RunTimeCalculator(WEB_STAMP, (fornatted) => {
  runTimeText.value = fornatted;
});

/**
 * 获取当前在站人数
 */
const nowPeoples = ref(0);
const size = ref(0);
const getNowPeoples = async () => {
  const { data } = await getNowPeopleService();
  nowPeoples.value = data;
};

// 移动端抽屉
const drawer = ref(false);

const currentIndex = ref(0);
const go = (index, url) => {
  currentIndex.value = index;
  router.push(url);
};
// 导航卡片数据
const navbar = ref([
  {
    id: 1,
    icon: "https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E9%A6%96%E9%A1%B5.png",
    name: "首页",
    router: "/home",
  },
  {
    id: 2,
    icon: "https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E6%96%87%E7%AB%A0%E7%BB%862.png",
    name: "文章",
    router: "/article",
  },
  {
    id: 3,
    icon: "https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E4%BF%AE%E6%94%B9.png",
    name: "随记",
    router: "/notes",
  },
  {
    id: 4,
    icon: "https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E9%97%AE%E5%8D%B7.png",
    name: "留言墙",
    router: "/wall",
  },
  {
    id: 5,
    icon: "https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E7%9B%B8%E5%86%8C%E7%9B%B8%E7%89%87%E7%85%A7%E7%89%87.png",
    name: "相册",
    router: "/album",
  },
  {
    id: 6,
    icon: "https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E6%A0%91%E6%9C%A8.png",
    name: "关于我",
    router: "/aboutme",
  },
  {
    id: 7,
    icon: "https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E5%8F%8B%E9%93%BE%E7%AE%A1%E7%90%86.png",
    name: "友链",
    router: "/friend",
  },
]);
// 根据路由路径设置导航激活状态
const setActiveNavByRoute = () => {
  const path = route.path;
  switch (path) {
    case "/home":
      currentIndex.value = 0;
      break;
    case "/article":
      currentIndex.value = 1;
      break;
    case "/notes":
      currentIndex.value = 2;
      break;
    case "/wall":
      currentIndex.value = 3;
      break;
    case "/album":
      currentIndex.value = 4;
      break;
    case "/aboutme":
      currentIndex.value = 5;
      break;
    case "/friend":
      currentIndex.value = 6;
      break;
  }
};
// 文章分类数据
const useCategoryList = ref([]);
// 个人卡篇信息
const myInfo = ref({});
// 每日一言数据
const everyDayWordList = ref([]);

/**
 * 查询所有可用文章分类信息
 */
const getUseCategoryList = async () => {
  const { data } = await getUseListService();
  useCategoryList.value = data;
};
/**
 * 查询可用个人卡片信息数据
 */
const getMyInfo = async () => {
  const { data } = await getMyInfoCardService();
  myInfo.value = data;
};
/**
 * 查询可用每日一言数据
 */
const getEveryDayWord = async () => {
  const { data } = await getEveryDayWordService();
  everyDayWordList.value = data;
};
/**
 * 查询最新更新更新篇数和文章总数
 */
const latestWithTotal = ref({});
const getNavBNarBtotomInfo = async () => {
  const { data } = await getInfoService();
  latestWithTotal.value = data;
};

/**
 * 动画-----
 */
const nowPeopleRef = ref();
const nowContent = ref();
const nowPeopleAnimate = () => {
  const peoples = nowPeopleRef.value;
  const content = nowContent.value;
  gsap.set(peoples, {
    top: -peoples.offsetHeight,
  });
  gsap.set(content, {
    opacity: 0,
  });
  gsap.to(peoples, {
    top: peoples.offsetHeight,
    left: "50%",
    duration: 1,
    ease: "power2.inOut",
    xPercent: -50,
    onComplete: () => {
      gsap.to(content, {
        opacity: 1,
      });
      gsap.to(peoples, {
        display: "none",
        duration: 5,
      });
    },
  });
};

const particlesLoaded = async (container) => {};

// 粒子配置
const optionsed = {
  fpsLimit: 60,
  particles: {
    groups: {
      z5000: {
        number: {
          value: 150,
        },
        zIndex: {
          value: 5000,
        },
      },
      z7500: {
        number: {
          value: 80,
        },
        zIndex: {
          value: 75,
        },
      },
      z2500: {
        number: {
          value: 100,
        },
        zIndex: {
          value: 25,
        },
      },
      z1000: {
        number: {
          value: 80,
        },
        zIndex: {
          value: 10,
        },
      },
    },
    number: {
      value: 800,
      density: {
        enable: false,
        area: 800,
      },
    },
    color: {
      value: "#fff",
      animation: {
        enable: false,
        speed: 10,
        sync: true,
      },
    },
    shape: {
      type: "circle",
    },
    opacity: {
      value: { min: 0.1, max: 1 },
      random: false,
      animation: {
        enable: false,
        speed: 3,
        sync: false,
      },
    },
    size: {
      value: 1,
    },
    move: {
      angle: {
        value: 10,
        offset: 0,
      },
      enable: true,
      speed: 2,
      direction: "right",
      random: false,
      straight: true,
      outModes: "out",
    },
    zIndex: {
      value: 5,
      opacityRate: 0.5,
    },
  },
  interactivity: {
    detectsOn: "canvas",
    events: {
      onHover: {
        enable: false,
        mode: "repulse",
      },
      onClick: {
        enable: true,
        mode: "push",
      },
      resize: true,
    },
    modes: {
      grab: {
        distance: 400,
        links: {
          opacity: 1,
        },
      },
      bubble: {
        distance: 400,
        size: 40,
        duration: 2,
        opacity: 0.8,
      },
      repulse: {
        distance: 200,
      },
      push: {
        quantity: 4,
        groups: ["z5000", "z7500", "z2500", "z1000"],
      },
      remove: {
        quantity: 2,
      },
    },
  },
  detectRetina: true,
  background: {
    color: "transparent",
  },
  emitters: {
    position: {
      y: 55,
      x: -30,
    },
    rate: {
      delay: 5,
      quantity: 2,
    },
    size: {
      width: 0,
      height: 0,
    },
    particles: {
      shape: {
        type: "images",
        options: {
          images: [
            {
              src: "https://particles.js.org/images/amongus_blue.png",
              width: 205,
              height: 267,
            },
            {
              src: "https://particles.js.org/images/amongus_cyan.png",
              width: 207,
              height: 265,
            },
            {
              src: "https://particles.js.org/images/amongus_green.png",
              width: 204,
              height: 266,
            },
            {
              src: "https://particles.js.org/images/amongus_lime.png",
              width: 206,
              height: 267,
            },
            {
              src: "https://particles.js.org/images/amongus_orange.png",
              width: 205,
              height: 265,
            },
            {
              src: "https://particles.js.org/images/amongus_pink.png",
              width: 205,
              height: 265,
            },
            {
              src: "https://particles.js.org/images/amongus_red.png",
              width: 204,
              height: 267,
            },
            {
              src: "https://particles.js.org/images/amongus_white.png",
              width: 205,
              height: 267,
            },
          ],
        },
      },
      opacity: {
        value: 1,
      },
      size: {
        value: 40,
      },
      move: {
        speed: 10,
        outModes: {
          default: "destroy",
          left: "none",
        },
        straight: true,
      },
      zIndex: {
        value: 0,
      },
      rotate: {
        value: {
          min: 0,
          max: 360,
        },
        animation: {
          enable: true,
          speed: 10,
          sync: true,
        },
      },
    },
  },
};

onMounted(async () => {
  getNowPeoples();
  nowPeopleAnimate();
  getUseCategoryList();
  setActiveNavByRoute();
  getMyInfo();
  getEveryDayWord();
  getNavBNarBtotomInfo();
  clientSendServer();
  runtime.start();
});
</script>
  
  <style lang="scss" scoped>
.home {
  background-color: #f3f4f5;
  position: relative;

  .now-peoples {
    position: fixed;
    top: 5vh;
    right: calc(50% - 7.5vw);
    width: 18vw;
    padding: 5px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #b9dcf3a9;
    border-radius: 12px;
    z-index: 999;

    @media (max-width: 768px) {
      width: 70vw;
      height: 50px;
      line-height: 7vh;
    }
  }

  .banner {
    height: 50vh;
    background: url(https://butvan-blog.oss-cn-beijing.aliyuncs.com/6628990012b51.jpg)
      no-repeat center center;
    background-size: cover;
    position: relative;

    @media (max-width: 768px) {
      height: 38vh;
    }

    // 用户端导航栏
    .c-nav-bar {
      position: absolute;
      top: 0;
      opacity: 0;
      width: 100vw;
      height: 7vh;
      padding: 0px 30px;
      background-color: rgba(217, 237, 241, 0.253);
      backdrop-filter: blur(2px); /* 调整模糊强度 */
      -webkit-backdrop-filter: blur(2px); /* Safari 兼容 */
      pointer-events: none;
      @media (max-width: 768px) {
        opacity: 1;
        display: flex;
        align-items: center;
        gap: 20px;
        pointer-events: all;
      }
    }
  }

  .main {
    padding: 5px 20px 20px 20px;
    @media (max-width: 768px) {
      padding: 5px;
    }
    .left {
      min-height: 20vh;
      .myself-info {
        height: 300px;
        padding: 12px;
        background: rgb(255, 255, 255, 0.7);
        border-radius: 12px;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
        // 头像
        .headerPi {
          width: 65px;
          height: 65px;
          margin: 18px auto;
          border-radius: 18px;
          border: 2px solid #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          background-size: cover;
          box-shadow: 0px 15px 10px rgba(0, 0, 0, 0.1);
        }

        // 名字
        .name {
          font-size: 20px;
          text-align: center;
          height: 26px;
          line-height: 26px;
          transition: all 0.1s;
          cursor: pointer;
          &:hover {
            font-size: 22px;
            color: rgb(63, 167, 231);
          }
        }

        // 个人描述
        .desc {
          min-height: 50px;
          padding: 5px 12px;
          text-indent: 2em;
          display: flex;
          justify-content: start;
          font-size: 14px;
          color: rgb(150, 149, 149);
        }

        // 第三方社交链接
        .social-contact {
          margin-top: 32px;
          height: 50px;
          line-height: 50px;

          ul {
            display: flex;
            justify-content: space-around;
            li {
              img {
                width: 32px;
                cursor: pointer;
                transition: all 0.3s;

                &:hover {
                  transform: scale(1.05);
                }
              }
            }
          }
        }
      }
      .nav-bar {
        margin-top: 2vh;
        height: 600px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: rgb(255, 255, 255, 0.7);
        border-radius: 12px;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
        @media (max-width: 768px) {
          display: none;
        }

        // 导航项
        .item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 0px 10px;
          height: 52px;
          line-height: 52px;
          cursor: pointer;
          transition: all 0.3s;

          // icon图标
          img {
            width: 24px;
          }

          &:hover {
            border-radius: 12px;
            background-color: rgba(185, 221, 233, 0.3);
            transform: scale(1.05);
          }
        }

        // 点击激活的样式
        .active {
          transition: all 0.5s;
          border-radius: 12px;
          background-color: rgba(185, 221, 233, 0.3);
        }
      }

      // 其它
      .anouther {
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        // 其它中的每一项
        .anouther-item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 0px 10px;
          height: 60px;
          line-height: 60px;

          .run-time {
            color: #42c28dc4;
          }

          img {
            width: 24px;
          }
        }
      }
    }
  }

  .body {
    min-height: 100vh;
  }

  .right {
    min-height: 100vh;
    .every-day-word {
      height: 260px;
      padding: 24px;
      border-radius: 12px;
      background: rgb(255, 255, 255, 0.7);
      border-radius: 12px;
      box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);

      @media (max-width: 768px) {
        margin-top: 36px;
      }
      // 头部区域
      .head {
        height: 42px;
        padding: 0px 10px;
        display: flex;
        align-items: center;
        gap: 10px;

        img {
          width: 24px;
          height: 24px;
          cursor: pointer;
          transition: all 0.3s;
          &:hover {
            transform: scale(1.2);
          }
        }

        .title {
          font-weight: 600;
          font-size: 18px;
        }
      }

      // 主体区域
      .body {
        height: 120px;
        text-indent: 2em;
        div {
          font-size: 16px;
          margin-bottom: 10px;
          color: rgba(73, 102, 112, 0.913);
          &::first-letter {
            font-weight: 600;
            color: rgba(91, 199, 235, 0.664);
            font-size: 20px;
          }

          .time {
            font-size: 13px;
            color: #bbb9b9;
          }
        }
      }

      // 底部区域
      .footer {
        height: 38px;
        // border: 1px solid black;
      }
    }

    // 文章分类
    .article-classify {
      margin-top: 24px;
      height: 260px;
      padding: 18px;
      border-radius: 12px;
      background: rgb(255, 255, 255, 0.7);
      border-radius: 12px;
      box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
      .ac-head {
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 0.5px #f3f4f5 solid;
        .ac-left {
          display: flex;
          gap: 10px;
          img {
            width: 24px;
          }
        }
        .ac-right {
          font-size: 14px;
          padding: 3px;
          color: #333;
          border-radius: 6px;
          font-size: 13px;
          .ac-count {
            font-size: 17px;
          }
        }
      }
      .ac-body {
        padding: 10px 5px;
        height: 160px;
        overflow: auto;
        scrollbar-width: none;
        .ac-item {
          height: 40px;
          padding: 0px 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: #e6f1f4d6;
          border-radius: 10px;
          margin-bottom: 10px;
          transition: all 0.3s;
          cursor: pointer;
          &::-webkit-scrollbar {
            display: none;
          }
          &:hover {
            transform: scale(1.02);
            box-shadow: 2px 2px 10px rgba(193, 226, 243, 0.7);
          }
          .ac-left {
            display: flex;
            gap: 10px;
            img {
              width: 20px;
            }
            .ac-name {
              font-weight: 600;
              font-family: "Courier New", Courier, monospace;
            }
          }
          .ac-right {
            font-size: 15px;
          }
        }
      }
    }
  }

  :deep(.el-drawer) {
    background-color: rgba(255, 255, 255, 0.315); /* 设置半透明背景色 */
    backdrop-filter: blur(10px); /* 模糊效果，值越大越模糊 */
    -webkit-backdrop-filter: blur(10px); /* Safari 浏览器兼容 */
  }

  .drawer-item {
    height: 52px;
    line-height: 52px;
  }
}
</style>